<link rel="stylesheet" href="/assets/d2eace91/css/styles.css?v=1.3"/>
<div id="{{ $uuid }}" class="plus-album image-selector-container">
    <div class="tab-content">
        <!-- 分组 -->
        <div class="category-list-region pull-left">
            <ul class="category-list dir-list" data-dir_id="{{ $dir_id }}">

                @foreach($video_dir_list as $key=>$v)
                    <li id="dir_{{ $v->dir_id }}" class="category-item @if($key == 0) selected @endif" data-dir_id="{{ $v->dir_id }}" title="{{ $v->dir_name }}">
                        {{ $v->dir_name }}
                        <span></span>
                    </li>
                @endforeach

            </ul>
        </div>
        <!-- 视频列表 -->
        <div class="attachment-list-region">
            <div class="search-container">
                <span class="pull-left">
					<select id="sort_name" class="form-control form-control-xs m-l-2 w150"> <option value="add_time-desc">按上传时间从晚到早</option><option value="add_time-asc">按上传时间从早到晚</option><option value="size-asc">按视频从小到大</option><option value="size-desc">按视频从大到小</option><option value="name-asc">按视频名升序</option><option value="name-desc">按视频名降序</option>
					</select>
				</span>
                <span class="pull-right">
					<input type="text" id="video_name" class="form-control form-control-sm w150" placeholder="请输入视频名称">
					<a class="btn btn-primary btn-sm video-search"><i class="fa fa-search m-l-0"></i>搜索</a>
					<a class="btn btn-primary btn-sm image-selector-upload"><i class="fa fa-upload m-l-0"></i>上传视频 </a>
				</span>

            </div>


            {{-- 视频列表 --}}
            @include('site.partials._video_selector_list')



        </div>
        <!--已选项-->
        <div class="selected-pic-container">
            <div class="selected-pic-title">
                已选择
                <span class="num">
                    <span class="image-selector-number">0</span>
                    /
                    <span>{{ $size }}</span>
                </span>
                个视频（拖动可修改插入顺序）
            </div>
            <div class="mod-selected">
                <ul id="dropzone" class="ui-sortable">



                    <li class="drop-item mod-img seat">
                        <a href="javascript:void(0);">
                            <i class="seat-icon">+</i>
                        </a>
                    </li>



                </ul>
            </div>
        </div>
    </div>
</div>
<script src="/assets/d2eace91/js/jquery-ui.js?v=1.3"></script>
<script src="/assets/d2eace91/js/table/jquery.tablelist.js?v=1.3"></script>
<script id="template_{{ $uuid }}" type="text">
<li data-id="#id#" class="drop-item mod-img">
<a href="javascript:void(0);" title="#title#">
#image#
<span class="pixel">#width#x#height#</span>
</a>
<i class="fa fa-times-circle" data-id="#id#"></i>
</li>
</script>
<!--拖拽-->
<script type="text/javascript">
    $().ready(function() {

        var tablelist = null;
// 选中的视频编号
        var video_list = {};

        var size = "{{ $size }}";

        var container = $("#{{ $uuid }}");

        $(container).find('#dropzone').droppable({
            activeClass: 'active',
            hoverClass: 'hover',
            accept: ":not(.ui-sortable-helper)", // Reject clones generated by sortable
            drop: function(e, ui) {
                var $el = $('<div class="drop-item">' + ui.draggable.text() + '</div>');
                $el.append($('<a class="delete-btn"></a><fa class="fa fa-times-circle"></fa>').click(function() {
                    $(this).parent().detach();
                }));
                $(this).append($el);
            }
        }).sortable({
            items: '.drop-item',
            sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                $(this).removeClass("active");
            }
        });

        $(container).find(".category-thumb").click(function(event) {
            $(".category-list").removeClass('selected');
            $(this).addClass('selected');
            $(".pic-container").removeClass('list');
        });

        $(container).find(".category-list").click(function(event) {
            $(".category-thumb").removeClass('selected');
            $(this).addClass('selected');
            $(".pic-container").addClass('list');
        });

        $(container).parent().css({
            "border-top": "1px #C1C1C1 solid"
        });

        var object = {
            values: function() {
                var values = [];
                $(container).find("#dropzone").find(".drop-item").each(function() {
                    var id = $(this).data("id");

                    if (video_list[id]) {
                        values.push(video_list[id]);
                    } else {
                        values.push(null);
                    }
                });
                return values;
            }
        };

// 绑定获取视频列表的事件
        $(container).data("object", object);

//
//
//

// 设置选择视频的数量
        $(container).find(".image-selector-number").html($(container).find(".drop-item").not(".seat").size());

        function changeImage(id, selected) {

            id = id + "";

            var target = $(container).find(".image-item").filter("[data-id='" + id + "']");

            if (selected == false) {
// 取消选择
                $(target).removeClass("selected");

                var html = '<li class="drop-item mod-img seat">';
                html += '<a href="javascript:void(0);">';
                html += '<i class="seat-icon">+</i>';
                html += '</a>';
                html += '</li>';

                var drop_target = $(container).find("#dropzone").find(".drop-item").filter("[data-id='" + id + "']");
                $(drop_target).replaceWith(html);

// 删除
                delete video_list[id];
            } else if (selected == true && $(target).size() > 0) {

// 选中
                if ($(target).hasClass("selected") == false) {
                    $(target).addClass("selected");
                }

                var drop_target = $(container).find("#dropzone").find(".drop-item").filter("[data-id='" + id + "']");

// 如果已被选中则停止
                if ($(drop_target).size() == 1) {
                    return;
                }

// 已达到最大上传数量先移除最后一张
                if ($(container).find(".drop-item").not(".seat").size() == size) {
                    var last = $(container).find(".drop-item").not(".seat").last();
                    changeImage($(last).data("id"), false);
                }

// 添加
                var data = $(target).find("img").data();

                video_list[id] = data;

                if ($(drop_target).size() == 0) {
// 放入选中的栏
                    var html = $("#template_{{ $uuid }}").html();

                    html = html.replace(/#title#/, $(target).attr("title"));
                    html = html.replace(/#width#/, data.width);
                    html = html.replace(/#height#/, data.height);
                    html = html.replace(/#id#/, id);
                    html = html.replace(/#id#/, id);
                    html = html.replace(/#image#/, $(target).find("img").prop("outerHTML"));

                    var seat = $(container).find("#dropzone").find(".drop-item").filter(".seat").first();

                    if ($(seat).size() > 0) {
                        $(seat).replaceWith($($.parseHTML(html)));
                    } else {
                        $(container).find("#dropzone").append(html);
                    }
                }
            }

// 设置选择视频的数量
            $(container).find(".image-selector-number").html($(container).find(".drop-item").not(".seat").size());
        }

        var dir_id = "6";

        tablelist = $(container).find("#tablelist").tablelist({
            url: "/site/video-selector?output=0",
            dataCallback: function(data) {
                data.dir_id = $(container).find(".dir-list").data("dir_id");
                data.sort_name = $(container).find("#sort_name").val();
// 切换目录回到第一页
                if (dir_id != data.dir_id) {
                    data.page.cur_page = 1;
                }
                return data;
            },
            callback: function() {
                dir_id = $(".dir-list").data("dir_id");

                $(container).find(".dir-list > li").removeClass("selected");
                $(container).find("#dir_" + dir_id).addClass("selected");

                $(container).find(".image-item").each(function() {
                    var id = $(this).data("id") + "";
                    if (video_list[id]) {
                        changeImage(id, true);
                    }
                });
            }
        });
// 切换分组
        $(container).find(".dir-list > li").click(function() {
            $(container).find(".dir-list").data("dir_id", $(this).data("dir_id"));
            tablelist.load();
        });
// 排序
        $(container).find("#sort_name").change(function() {
            tablelist.load();
        });
// 选择视频
        $(container).on("click", ".image-list > .image-item", function() {
            var id = $(this).data("id");
            var selected = $(this).hasClass("selected") ? false : true;
            changeImage(id, selected);
        });
// 取消选择
        $(container).on("click", ".drop-item i", function() {
            var id = $(this).data("id");
            changeImage(id, false);
        });

// 上传视频
        $(container).find(".image-selector-upload").click(function() {
            var options = $(container).data("options");

            if ($.isPlainObject(options)) {
                options = $.extend({
                    maxSize: "{{ sysconf('video_max_filesize')*1020 ?? '4194304' }}"
                }, options);
            } else {
                options = {
                    maxSize: "{{ sysconf('video_max_filesize')*1020 ?? '4194304' }}"
                };
            }

            $.videoupload({
                url: '/site/video-gallery',
                data: {
                    dir_id: $(container).find(".dir-list").data("dir_id"),
                },
// 允许批量上传
                multiple: true,
                options: options,
                callback: function(result) {
                    if (result.code == 0) {

                        var list = result.data;

                        if (!$.isArray(list)) {
                            list = [list];
                        }

// 选择
                        if (size == 1) {
// 如果只允许上传1个视频，则把上传的第一个视频替换
                            video_list = [];
                            video_list[list[0].video_id] = list[0];
                        } else if ($(container).find(".drop-item").filter(".seat").size() == 0 && list.length == 1) {
// 如果只上传一个视频并且没有空余的位置
                            var id = $(container).find(".drop-item").not(".seat").last().data("id");
                            changeImage(id, false);
                            video_list[list[0].video_id] = list[0];
                        } else {
                            var length = Math.min(size - $(container).find(".drop-item").not(".seat").size(), list.length);

                            for (var i = 0; i < length; i++) {
// 添加项
                                video_list[list[i].video_id] = list[i];
                            }
                        }

// 加载
                        tablelist.load();
                    } else {
                        $.msg(result.message, {
                            time: 5000
                        });
                    }
                }
            });
        });
    })
</script>